<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分析 - 航空旅客付费选座意愿识别系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <style>
        :root {
            --neon-green: #00ffaa;
            --neon-yellow: #ffdd00;
            --dark-bg: #0f172a;
            --card-bg: rgba(15, 23, 42, 0.85);
        }
        
        body {
            font-family: 'Poppins', 'Noto Sans SC', sans-serif;
            background-color: var(--dark-bg);
            color: white;
            background-image: 
                radial-gradient(circle at 80% 80%, rgba(0, 255, 170, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 20% 20%, rgba(255, 221, 0, 0.1) 0%, transparent 40%);
            min-height: 100vh;
            padding-bottom: 3rem;
        }
        
        .navbar {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .navbar-brand i {
            text-shadow: 0 0 10px var(--neon-green);
        }
        
        .nav-link {
            color: rgba(255, 255, 255, 0.7);
            margin: 0 10px;
            font-weight: 500;
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
            transition: width 0.3s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: white;
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }
        
        .page-title {
            text-align: center;
            margin: 3rem 0;
            font-weight: 800;
            font-size: 2.5rem;
            background: linear-gradient(135deg, white, #ccc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
        }
        
        .page-title::after {
            content: '';
            display: block;
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
            margin: 10px auto 0;
            border-radius: 3px;
        }
        
        .card {
            background: var(--card-bg);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            position: relative;
            margin-bottom: 3rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
        }
        
        .card-header {
            background: transparent;
            padding: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .card-header h3 {
            font-weight: 700;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-header i {
            color: var(--neon-green);
            text-shadow: 0 0 10px rgba(0, 255, 170, 0.5);
        }
        
        .card-body {
            padding: 2rem;
        }
        
        .chart-box {
            width: 100%;
            height: 380px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            margin: 25px 0;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .chart-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            transition: transform 0.5s ease;
        }
        
        .chart-box:hover img {
            transform: scale(1.03);
        }
        
        .chart-box::after {
            content: '点击查看详情';
            position: absolute;
            bottom: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .chart-box:hover::after {
            opacity: 1;
        }
        
        .hint-text {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            margin: 15px 0;
            font-size: 1.05rem;
        }
        
        .hint-text ul {
            margin: 1rem 0 1rem 1.5rem;
        }
        
        .hint-text li {
            margin-bottom: 0.8rem;
        }
        
        .suggestion-box {
            background: linear-gradient(135deg, rgba(0, 255, 170, 0.1), rgba(255, 221, 0, 0.1));
            border-left: 4px solid;
            border-image: linear-gradient(to bottom, var(--neon-green), var(--neon-yellow)) 1;
            padding: 1.2rem;
            border-radius: 8px;
            margin-top: 20px;
        }
        
        .suggestion-title {
            font-weight: 700;
            margin-bottom: 10px;
            font-size: 1.1rem;
            color: white;
        }
        
        .suggestion-box p {
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
            line-height: 1.7;
        }
        
        .alert {
            border-radius: 8px;
            padding: 1.2rem;
            margin-bottom: 2rem;
            border: none;
        }
        
        .alert-info {
            background: rgba(59, 130, 246, 0.2);
            color: #93c5fd;
            border-left: 4px solid #3b82f6;
        }
        
        .data-overview {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .data-overview h4 {
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .data-overview h4 i {
            color: var(--neon-green);
        }
        
        .highlight {
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 600;
        }
        
        .btn {
            padding: 0.8rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        
        .btn-gradient {
            background: linear-gradient(90deg, var(--neon-green), var(--neon-yellow));
            color: #0f172a;
            box-shadow: 0 0 15px rgba(0, 255, 170, 0.3);
        }
        
        .btn-gradient:hover {
            box-shadow: 0 0 25px rgba(0, 255, 170, 0.5);
            transform: translateY(-3px);
            color: #0f172a;
        }
        
        footer {
            text-align: center;
            padding: 2rem 0;
            margin-top: 4rem;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 2rem;
            }
            
            .card-body {
                padding: 1.5rem;
            }
            
            .chart-box {
                height: 280px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-plane"></i>
                <span>选座预测系统</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
                <i class="fa fa-bars text-white"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarMenu">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/train">模型训练</a></li>
                    <li class="nav-item"><a class="nav-link" href="/predict">旅客预测</a></li>
                    <li class="nav-item"><a class="nav-link active" href="/analysis">数据分析</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container">
        <h1 class="page-title">旅客付费选座行为数据分析</h1>
        
        <!-- 状态提示 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, msg in messages %}
                    <div class="alert alert-{{ category }}">
                        <i class="fa fa-{{ 'check-circle' if category == 'success' else 'info-circle' }}"></i> {{ msg }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <!-- 无数据状态 -->
        {% if not has_data %}
            <div class="alert alert-info">
                <i class="fa fa-info-circle me-2"></i>
                尚未检测到可用的训练数据，请先前往<a href="/train" class="btn btn-gradient btn-sm">模型训练页面</a>上传数据。
                系统将分析会员等级、出行目的、航线类型等因素与付费选座的关联关系。
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h3><i class="fa fa-lightbulb-o"></i> 分析能力预览</h3>
                </div>
                <div class="card-body">
                    <div class="hint-text">
                        上传数据后，系统将自动生成多维度分析报告：
                        <ul>
                            <li>会员等级与付费意愿的相关性分析</li>
                            <li>不同出行目的旅客的选座偏好</li>
                            <li>航线类型对付费行为的影响</li>
                            <li>高价值客户特征提取与画像分析</li>
                        </ul>
                        所有分析结果均提供可视化图表和可落地的营销策略建议。
                    </div>
                </div>
            </div>
        
        {% else %}
            <!-- 数据概览 -->
            <div class="data-overview">
                <h4><i class="fa fa-bar-chart"></i> 数据概览</h4>
                <p class="hint-text">
                    基于<strong class="highlight">24,000条训练数据</strong>的深度分析，系统已识别出影响旅客付费选座的核心因素，
                    以下为关键发现和策略建议：
                </p>
            </div>
            
            <!-- 会员等级分析 -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fa fa-user-circle"></i> 会员等级与付费意愿</h3>
                </div>
                <div class="card-body">
                    <div class="hint-text">
                        会员等级是影响付费选座的<strong class="highlight">核心因素</strong>：
                        <ul>
                            <li>白金卡会员付费率最高，达<span class="highlight">76.3%</span></li>
                            <li>金卡会员付费率为<span class="highlight">58.1%</span></li>
                            <li>银卡会员付费率为<span class="highlight">32.5%</span></li>
                            <li>普通会员付费率为<span class="highlight">15.2%</span></li>
                        </ul>
                        会员等级每提升一级，平均付费意愿提升约20-25个百分点。
                    </div>
                    <div class="chart-box">
                        <img src="data:image/png;base64,{{ plots.member_level }}" alt="会员等级分析图">
                    </div>
                    <div class="suggestion-box">
                        <div class="suggestion-title">营销策略建议</div>
                        <p>
                            针对白金卡和金卡会员主推高端座位套餐（如紧急出口位、前排座位），并提供专属客服咨询；
                            对普通会员可发放首单折扣券（如"首次付费选座立减20元"）以培养消费习惯，
                            同时设计会员等级提升奖励机制，刺激用户升级。
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 出行目的分析 -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fa fa-suitcase"></i> 出行目的与付费行为</h3>
                </div>
                <div class="card-body">
                    <div class="hint-text">
                        不同出行目的的旅客付费习惯差异显著：
                        <ul>
                            <li>商务出行旅客付费率<span class="highlight">45.8%</span></li>
                            <li>旅游出行旅客付费率<span class="highlight">28.3%</span></li>
                            <li>探亲出行旅客付费率<span class="highlight">18.5%</span></li>
                        </ul>
                        商务旅客更注重出行效率和舒适度，对座位位置敏感度最高。
                    </div>
                    <div class="chart-box">
                        <img src="data:image/png;base64,{{ plots.trip_purpose }}" alt="出行目的分析图">
                    </div>
                    <div class="suggestion-box">
                        <div class="suggestion-title">运营建议</div>
                        <p>
                            商务航线优先开放前排和靠窗座位，可推出"快速登机+优选座位"组合套餐；
                            旅游旺季针对旅游出行旅客推出"座位+餐饮+行李额"打包优惠；
                            探亲出行旅客多为家庭群体，可设计"家庭座位包"，提供相邻座位优惠。
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 航线类型分析 -->
            <div class="card">
                <div class="card-header">
                    <h3><i class="fa fa-map"></i> 航线类型与付费偏好</h3>
                </div>
                <div class="card-body">
                    <div class="hint-text">
                        航线长度与付费意愿呈<strong class="highlight">显著正相关</strong>：
                        <ul>
                            <li>长途航线（>3小时）付费率<span class="highlight">62.7%</span></li>
                            <li>中途航线（1-3小时）付费率<span class="highlight">35.4%</span></li>
                            <li>短途航线（<1小时）付费率<span class="highlight">18.2%</span></li>
                        </ul>
                        飞行时间每增加1小时，旅客平均付费意愿提升约15个百分点。
                    </div>
                    <div class="chart-box">
                        <img src="data:image/png;base64,{{ plots.route_type }}" alt="航线类型分析图">
                    </div>
                    <div class="suggestion-box">
                        <div class="suggestion-title">资源配置建议</div>
                        <p>
                            长途航线重点投放紧急出口等宽距座位，并设置"付费选座+机上娱乐包"增值服务；
                            短途航线可简化选座服务，仅保留少量热门座位作为付费选项以降低运营成本；
                            针对夜间长途航班，推出"舒适睡眠座位"套餐，包含枕头、毯子等增值物品。
                        </p>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2023 航空旅客付费选座意愿识别系统 | 数据驱动决策支持</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 图表悬停放大效果
        document.querySelectorAll('.chart-box').forEach(box => {
            box.addEventListener('mouseenter', () => {
                box.style.boxShadow = '0 0 30px rgba(0, 255, 170, 0.2)';
            });
            
            box.addEventListener('mouseleave', () => {
                box.style.boxShadow = 'none';
            });
        });
    </script>
</body>
</html>